/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-06-19 13:36:32
 * @LastEditTime : 2023-06-21 14:14:24
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\HomePage\Supervision.jsx
 * @Description  :
 */
import './Scss/Supervision.scss'
import { Http } from '../../../../Api'
import { useRequest, useSessionStorageState } from 'ahooks'
import { useEffect, useState } from 'react'
import { RingProgressSetUp } from './Common'
import { RingProgress } from '@ant-design/plots'
import { ICON } from '../../../../Configure/Icon'
import { colorRgb } from '../../../../Configure/Common'

export const Supervision001 = () => {
    const [temporaryData] = useSessionStorageState('temporaryData')
    const [backColor, setBackColor] = useState()
    const [chartsData, setChartsData] = useState()
    const [Data, setData] = useState([
        { uuid: 1, title: '下单数', value: 0, icon: 'IconAZuobiaoyoushujubeifen2' },
        { uuid: 2, title: '待审核', value: 0, icon: 'IconAHoutaiShouyetouzikongjianbeifen9' },
        { uuid: 3, title: '合格数', value: 0, icon: 'IconAZuobiaoyoushujubeifen4' },
        { uuid: 4, title: '不合格', value: 0, icon: 'IconAZuobiaoyoushujubeifen6' },
    ])

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            if (!res.list || JSON.stringify(res.list) === '{}') return false
            const { notOk, ok, percentd, submitted } = res.list
            Data.find(v => v.uuid === 1).value = submitted + ok + notOk || 0
            Data.find(v => v.uuid === 2).value = submitted || 0
            Data.find(v => v.uuid === 3).value = ok || 0
            Data.find(v => v.uuid === 4).value = notOk || 0
            setData([...Data])
            setBackColor(`rgba(${colorRgb(temporaryData.themeColor, 1)},0.1)`)
            setChartsData(RingProgressSetUp(percentd || 0, colorRgb(temporaryData.themeColor, 1), '合格率'))
        },
    })

    useEffect(() => {
        runAsync({ url: 'getSuperviseStatisticsHome' })
    }, [runAsync])

    return (
        <div className="Supervision001">
            <div className="HomePageTitle">监理工序</div>
            <div className="list" style={{ '--theme': temporaryData.themeColor, '--backColor': backColor }}>
                <div className="Data">
                    {Data.map(({ uuid, title, value, icon }) => (
                        <div key={uuid}>
                            <div>{ICON[icon]}</div>
                            <div>
                                <div>{title}</div>
                                <div>{value}</div>
                            </div>
                        </div>
                    ))}
                </div>
                {chartsData && <RingProgress {...chartsData} />}
            </div>
        </div>
    )
}
